<template>
	<div  class="right">
		<TopOfRight></TopOfRight>
		<BottomOfRight></BottomOfRight>
	</div>
</template>

<script>
    import TopOfRight from "./TopOfRight";
		import BottomOfRight from "./BottomOfRight";
		export default {
        name: "RightMain",
			components: {BottomOfRight, TopOfRight}
		}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
	.right {
		width: 94%;
		height: auto;
		order: 3;
		margin-bottom: .1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.right {
			position: sticky;
			top: 0;
			width: 15%;
			height: 90vh;
			align-self:flex-start;
			overflow-y: auto;
		}
		.right::-webkit-scrollbar {
			display: none;
		}
	}
	.right {
		border-radius: .1rem;
		box-sizing: border-box;
	}

</style>
